<template>
  <div>
      <div class="headerMultiple">
          <section>
              <p>该分组共有车辆{{page.total}}辆</p>
              <p class="dialogSearch">
                  <el-input size="small" placeholder="输入车牌号" v-model="number" @input=" getSearchList ($event,true)">
                      <i slot="suffix" class="el-input__icon el-icon-search"></i>
                  </el-input>
              </p>
          </section>
          <section>
              <el-button
                  type="primary"
                  @click="addProperty"
              >新增</el-button
              >
          </section>
      </div>
    <section style="width: 100%; margin-top: 10px">
      <div class="select-group-table">
        <el-table
          :data="selectedData"
          stripe
          border
          ref="allCarData"
          @selection-change="handleSelect"
          :row-key="getRowKeys"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="60" align="center">
            <template slot-scope="scope">
              <span>{{
                (page.pageNo - 1) * page.pageSize + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="truck.truckNumber"
            label="车牌号"
            min-width="99"
          ></el-table-column>
          <el-table-column prop="truck.axle.axle" label="车轴类型"  min-width="120">
          </el-table-column>
          <el-table-column label="操作" width="72px">
            <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="del(scope.row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="select-group-bottom">
        <el-pagination
          @current-change="handleGroupCurrentChange"
          :current-page.sync="page.pageNo"
          :page-size="page.pageSize"
          background
          layout="total, prev, pager, next"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </section>
    <el-dialog
      title="为当前分组选择车辆"
      :visible.sync="innerVisible"
      append-to-body
      @open="getCarList(page2)"
      class="select-dialog tableDialog"
    >
      <div class="container">
        <div class="content-left">
          <section
            style="
              margin-bottom: 10px;
            "
          >
              <div class="dialogSearch">
            <el-input size="small" placeholder="请输入车牌号" v-model="truckNumber" @input=" getInnerSearchList ($event,true)">
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
              </div>
          </section>
          <div class="select-group">
            <div class="select-group-table">
              <el-table
                :data="allCarData"
                stripe
                border
                ref="allCarData"
                @selection-change="handleSelect"
                :row-key="getRowKeys"
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{
                      (page2.pageNo - 1) * page2.pageSize + scope.$index + 1
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="truckNumber"
                  label="车牌号"
                  min-width="99"
                ></el-table-column>
                <el-table-column prop="axle.axle" label="车轴类型"  min-width="120">
                </el-table-column>
                <el-table-column
                  type="selection"
                  :reserve-selection="true"
                  width="50"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="select-group-bottom">
              <el-pagination
                @current-change="handleGroupCurrentChange"
                :current-page.sync="page2.pageNo"
                :page-size="page2.pageSize"
                background
                layout="total, prev, pager, next"
                :total="page2.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="content-right">
          <div>
            <p>
              已选车辆(<span>{{ this.selectedCarNumTags.length }}</span
              >)
            </p>
          </div>
          <div class="selected-car">
            <div class="selected-detail">
              <div class="selected-detail-box">
                <el-tag
                  :key="tag.id"
                  :label="tag.truckNumber"
                  :value="tag.id"
                  v-for="tag in selectedCarNumTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag.truckNumber }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer adjustButton">
        <el-button type="primary" @click="selectCar">确定</el-button>
        <el-button @click="innerVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCarList,
  selectCar,
  getCarListByGroup,
} from "@/api/truck/truckGroup.js";
export default {
  data() {
    return {
      allCarData: [],
      selectedCarNumTags: [
          {truckNumber:'',}
      ],
      selectedData: [],
      truckNumber:'',
      number: '',
      innerVisible: false,
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0,
      },
      page2: {
        pageSize: 5,
        pageNo: 1,
        total: 0,
      },
    };
  },
  methods: {
    getRowKeys(row) {
      return row.id;
    },
    getSearchList (event, isSearch) {
      if (isSearch) {
        this.getSelectCarBy()
      }
    },
    getInnerSearchList (event, isSearch) {
      if (isSearch) {
        this.getCar(this.page2)
      }
    },
    //删除已选车辆
    del(ids) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        this.loading = true;
        this.$http({
          url: "/truck/truckGroupRelation/delete",
          method: "delete",
          params: {
            ids: ids
          },
        }).then((data) => {
          if (data && data.success) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
          this.getSelectCarBy();
        });
      });
    },
    //保存选择车辆
    selectCar() {
      let ids = [];
      for (let i = 0; i < this.selectedCarNumTags.length; i++) {
        ids.push(this.selectedCarNumTags[i].id);
      }
      selectCar({
        groupId: this.$store.state.truck.detailId,
        truckIdList: ids,
      }).then((res) => {
        this.getSelectCarBy();
        this.$message({
          message: "恭喜你，添加成功",
          type: "success",
        });
        this.innerVisible = false
      });
    },
    //获取已选择车辆外面
    getSelectCarBy() {
      getCarListByGroup({
        truckGroupId: this.$store.state.truck.detailId,
        pageSize: this.page.pageSize,
        pageNo: this.page.pageNo,
        'truck.truckNumber': this.number
      }).then((res) => {
        this.selectedData = res.data.result.list;
        this.page.total = res.data.result.count;
      });
    },
    //获取已选择车辆
    getSelectCarList() {
      let that1 = this;
      return new Promise(function (resolve, reject) {
        getCarList({ truckGroup: that1.$store.state.truck.detailId }).then(
          (res) => {
            that1.$refs.allCarData.clearSelection();
            that1.selectedCarNumTags = res.data.result.list;
            that1.selectedCarNumTags.forEach((row) => {
              that1.$refs.allCarData.toggleRowSelection(row);
              console.log(that1.selectedCarNumTags)
              resolve(res.data.code);
            });
          }
        );
      });
    },
    //打开弹框使用
    getCarList(page) {
      this.getSelectCarList().then((res) => {
        this.getCar(page);
      });
    },

    //获得全部车辆
    getCar(page) {
      let that = this;
      return new Promise(function (resolve, reject) {
        getCarList({ pageSize: page.pageSize, pageNo: page.pageNo,truckNumber: that.truckNumber}).then(
          (res) => {
            that.allCarData = res.data.result.list;
            that.page2.total = res.data.result.count;
            resolve(res.data.code);
          }
        );
      });
    },
    addProperty() {
      this.innerVisible = true;
    },
    handleCheckBoxSelect(selection, row, group) {},
    handleSelect(selection) {
      this.selectedCarNumTags = selection;
      console.log(selection);
    },
    //分页外面的
    handleGroupCurrentChangeBy(e) {
      this.page.pageNo = e;
      this.getSelectCarBy();
    },
    //分页里面的
    handleGroupCurrentChange(e) {
        this.page2.pageNo = e;
      this.getCar(this.page2);
    },
    //取消选择
    handleClose(tag) {
      for (let index = 0; index < this.selectedCarNumTags.length; index++) {
        for (let i = 0; i < this.allCarData.length; i++) {
          if (this.selectedCarNumTags[index] == tag) {
            this.$refs.allCarData.toggleRowSelection(tag);
            //this.selectedCarNumTags.splice(index,1);
          }
        }
      }

      // this.selectedCarNumTags.forEach((item,index)=>{
      //   if (item===item) {
      //   this.selectedCarNumTags.splice(index,1);
      //   }

      // })
    },
  },
  mounted() {
    this.getSelectCarBy();
  },
};
</script>
<style lang="scss" scoped>
    @import "@/assets/scss/config.scss";
    p{
        margin: 0;
    }
.select-group-bottom {
  margin-top: 20px;
    ::v-deep .el-pagination{
        font-weight: 500;
    }
}
::v-deep .headerMultiple{
        >section:first-child{
            display: flex;
            .dialogSearch{
                margin-left: 20px;
                width: inherit;
            }
        }
    }

::v-deep.select-dialog{
    .container{
        display: flex;
        .content-left{
            width: 447px;
            .el-table{
                td:last-child{
                    .cell{
                        padding: 0;
                    }
                }
            }
            .el-pagination{
                text-align: right;
            }
        }
        .content-right{
            width: 491px;
            margin-left: 34px;
            >div:first-child{
                p{
                    line-height: 32px;
                }
            }
        }

    }
}
.selected-car {
  margin-top: 10px;
  .el-tag {
    background: #1890ff;
  }
}
.selected-group {
  .el-tag,
  .el-tag__close:hover {
    background: #f59a23;
  }
}
.selected-detail {
  width: 100%;
  height: 238px;
  background: #ffffff;
  border: 1px solid #dddddd;
  box-shadow: 0px 0px 5px 0px rgba(51, 51, 51, 0.1);
  border-radius: 4px;
  overflow-y: auto;

  padding: 11px;

  .el-tag {
    width: 106px;
    height: 26px;
    border-radius: 4px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    line-height: 24px;
    /*position: relative;*/
    ::v-deep.el-tag__close {
      color: #ffffff;
      background: #1890ff;
    }
    .el-icon-close {
      right: 0;
      /*position: absolute;*/
      /*top: 5px;*/
    }
  }
  .el-tag + .el-tag {
    margin-left: 8px;
    margin-bottom: 8px;
  }
  .el-tag:nth-child(4n + 1) {
    margin-left: 0;
  }
}
.selected-group {
  margin-top: 30px;
}
</style>
